<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function doAdd() {
            // 1.创建元素节点
            var li = document.createElement('li')
            // 2.设置文本内容
            // var text = document.createTextNode('hello');
            // li.appendChild(text)
            li.innerText='hello'
            // 3.设置属性
            li.id='welcome'
            // 4.添加到节点中
            document.getElementById('myul').appendChild(li)
        }

        function doDelete() {
            let ul = document.getElementById('myul');
            ul.firstElementChild.remove()
        }
    </script>
</head>
<body>
    <button onclick="doAdd()">添加节点</button>
    <button onclick="doDelete()">删除节点</button>
    <hr>

    <ul id="myul">
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </ul>
</body>
</html>